<template>
  <div class="code-block-component">
    <!-- 上部分：内容区域 -->
    <div class="content-section">
      <!-- 动态组件插槽 -->
      <slot name="component"></slot>
    </div>
    
    <!-- 下部分：功能按钮区域 -->
    <div class="actions-section">
      <button class="action-button" @click="copyCode">
        <span class="button-text">复制代码</span>
      </button>
      <button class="action-button" @click="viewSource">
        <span class="button-text">查看源代码</span>
      </button>
    </div>
    
    <!-- 复制成功提示 -->
    <transition name="fade">
      <div v-show="showCopySuccess" class="copy-success-message">
        复制成功
      </div>
    </transition>
    
    <!-- 源代码展示区域 -->
    <transition name="fade">
      <div v-show="showSourceCode" class="source-code-section">
        <div class="source-code-content">
          <slot name="sourceCode"></slot>
          <button class="action-button" @click="closeSourceCode">
            <span class="button-text">隐藏源代码</span>
          </button>
        </div>
      </div>
    </transition>
    
  </div>
</template>

<script>
export default {
  name: 'CodeBlockComponent',
  props: {
    description: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      showSourceCode: false,
      showCopySuccess: false
    };
  },
  methods: {
    copyCode() {
      // 获取源代码插槽的内容
      const sourceCodeElement = this.$el.querySelector('.source-code-content pre');
      if (!sourceCodeElement) {
        console.error('未找到源代码内容');
        return;
      }
      
      const content = sourceCodeElement.innerText;
      
      // 使用Clipboard API复制内容
      if (navigator.clipboard) {
        navigator.clipboard.writeText(content).then(() => {
          console.log('代码已复制到剪贴板');
          this.showCopySuccessMessage();
        }).catch(err => {
          console.error('复制失败:', err);
        });
      } else {
        // 降级方案
        const textArea = document.createElement('textarea');
        textArea.value = content;
        document.body.appendChild(textArea);
        textArea.select();
        try {
          document.execCommand('copy');
          console.log('代码已复制到剪贴板');
          this.showCopySuccessMessage();
        } catch (err) {
          console.error('复制失败:', err);
        }
        document.body.removeChild(textArea);
      }
    },
    
    viewSource() {
      // 切换源代码区域的显示状态
      this.showSourceCode = !this.showSourceCode;
    },
    
    closeSourceCode() {
      // 关闭源代码区域
      this.showSourceCode = false;
    },
    
    showCopySuccessMessage() {
      // 显示复制成功提示
      this.showCopySuccess = true;
      
      // 2秒后自动隐藏提示
      setTimeout(() => {
        this.showCopySuccess = false;
      }, 2000);
    }
  }
}
</script>

<style scoped>
.code-block-component {
  background: #333;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  position: relative;
}

/* 上部分：内容区域 */
.content-section {
  padding: 20px;
  /* 高度会随内容自动调整 */
}

/* 内容说明区域 */
.description {
  margin-top: 15px;
  padding: 10px;
  background: #3a3a3a;
  border-radius: 4px;
}

.description h3 {
  color: #3498db;
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 16px;
}

.description p {
  color: #e0e0e0;
  margin: 0;
  line-height: 1.5;
}

/* 下部分：功能按钮区域 */
.actions-section {
  height: 40px;
  background: #2d2d2d;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 10px;
}

.action-button {
  background: transparent;
  border: none;
  color: #3498db;
  cursor: pointer;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 3px;
  transition: background-color 0.3s;
}

.action-button:hover {
  background-color: rgba(52, 152, 219, 0.1);
}

.button-text {
  font-family: 'Consolas', monospace;
}

/* 源代码展示区域样式 */
.source-code-section {
  background-color: #1e1e1e;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  margin: 10px;
  transition: all 0.3s ease;
}

.source-code-section.fade-enter-active, .source-code-section.fade-leave-active {
  transition: opacity 0.3s, transform 0.3s;
}

.source-code-section.fade-enter, .source-code-section.fade-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}

/* 源代码内容样式 */
.source-code-content pre {
  margin: 0;
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 14px;
  line-height: 1.5;
  color: #e0e0e0;
  background-color: #1e1e1e;
  padding: 15px;
  border-radius: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* 隐藏源代码按钮样式 */
.source-code-content .action-button {
  width: 100%;
  color: white;
  background-color: #2d2d2d;
  border: 1px solid #444;
  padding: 8px;
  margin-top: 10px;
  transition: background-color 0.3s ease;
}

.source-code-content .action-button:hover {
  background-color: #3d3d3d;
}

/* 复制成功提示样式 */
.copy-success-message {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.8);
  color: #4caf50;
  padding: 15px 25px;
  border-radius: 5px;
  font-size: 16px;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.copy-success-message.fade-enter-active, .copy-success-message.fade-leave-active {
  transition: opacity 0.3s;
}

.copy-success-message.fade-enter, .copy-success-message.fade-leave-to {
  opacity: 0;
}
</style>